<script setup>
import Header from './components/Header.vue';
import ListShow from './components/ListShow.vue';
import Footer from './components/Footer.vue';
import Nothing from './components/Nothing.vue';
import { computed, onMounted, ref, watch } from 'vue';
import { deepClone } from './hooks/deepClone'
import { VueDraggableNext } from 'vue-draggable-next'



const todos = ref([
  { id: 1, text: '吃饭', done: false },
  { id: 2, text: '睡觉', done: true },
])



const list = ref([])

list.value = deepClone(todos.value)
let doneCount = computed(() => {
  return todos.value.filter(item => item.done).length
})
const add = (text) => {
  console.log(text.value)
  const newTodo = { id: todos.value.length + 1, text: text.value, done: false }
  todos.value.push(newTodo)
  list.value = deepClone(todos.value)
}
const all = () => {
  list.value = deepClone(todos.value)
}
const done = () => {
  list.value = deepClone(todos.value.filter(item => item.done))
}
const not = () => {
  list.value = deepClone(todos.value.filter(item => !item.done))
}
const del = (id) => {
  const index = todos.value.findIndex(item => item.id === id)
  todos.value.splice(index, 1)
  list.value = deepClone(todos.value)
}
const edit = (id, text) => {
  const index = todos.value.findIndex(item => item.id === id)
  todos.value[index].text = text
  list.value = deepClone(todos.value)
}
function toggerTodo(id) {
  const index = todos.value.findIndex(item => item.id === id)
  todos.value[index].done = !todos.value[index].done
  list.value = deepClone(todos.value)

}
function delAllDone() {
  for (let i = 0; i < todos.value.length; i++) {
    if (todos.value[i].done) {
      todos.value.splice(i, 1)
      i--
    }
  }
  list.value = deepClone(todos.value)
}
const delAll = () => {
  todos.value = []
  list.value = deepClone(todos.value)
}

watch(todos.value, () => {
  localStorage.setItem('arr',JSON.stringify(todos.value))
})

// 页面加载时，从localStorage中获取数据
onMounted(() => {
if (localStorage.getItem('arr')) {
  const arr = JSON.parse(localStorage.getItem('arr'))
  todos.value = arr
  list.value = deepClone(arr)
}
})
// 拖拽相关
let dragOptions = {
  animation: 200, // 动画时间，单位毫秒
  group: 'items', // 分组，同一分组内的元素可以互相拖拽
  disabled: false, // 是否禁用拖拽功能
  ghostClass: 'ghost', // 拖拽过程中占位元素的class名称
  handle: '.handle', // 拖拽手柄，只有拖拽手柄内的元素才能被拖拽
  sort: true, // 是否启用排序功能
  draggable: '.item', // 可拖拽元素的选择器
  filter: '.ignore' // 不可拖拽元素的选择器
}

</script>

<template>
  <Header @addTodo="add"></Header>
  <VueDraggableNext v-model="list.value" :options="dragOptions">
    <transition-group>
      <list-show v-for="doLi in list" :key="list.id" :doLi="doLi" @deleteTodo="del" @editTodo="edit"
        @toggerTodo="toggerTodo"></list-show>
    </transition-group>
  </VueDraggableNext>
  <Footer v-if="todos.length > 0" @allTodo="all" @doneTodo="done" @notTodo="not" @deleteDoneTodo="delAllDone"
    @deleteAllTodo="delAll">
    <template #done>{{ doneCount }}个任务已完成 </template>
    <template #all> 共有{{ todos.length }}个任务 </template>
  </Footer>
  <Nothing v-else></Nothing>
</template>

<style scoped></style>
